html, body {
    height: 100%;
    background-color: #55b9f3;
    display: flex;
    justify-content: center;
    align-items: center;
}
.keyboard {
    width: 960px;
    height: 280px;
    padding: 10px;
    border-radius: 10px;
    background: #55b9f3;
    box-shadow:  -20px -20px 60px #489dcf, 20px 20px 60px #62d5ff;

    display: grid;
    grid-template-columns: repeat(18, 1fr);
    grid-template-rows: repeat(6, 1fr);
}
.cell {
    padding: 4px;
}
.key {
    width: 100%;
    height: 100%;
    color: #aedbf5;
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background: linear-gradient(315deg, #4da7db, #5bc6ff);
    box-shadow: -1px -1px 40px #489dcf,
    1px 1px 40px #62d5ff;
    transition: background .3s;
    cursor: pointer;
    user-select: none;
}
.key:active {
    background: linear-gradient(315deg, #5bc6ff, #4da7db);
}
.backspace {
    grid-column: 14 / 16;
}
.tab {
    grid-column: 1 / 3;
}
.caps {
    grid-column: 1 / 3;
}
.enter {
    grid-column: 14 / 16;
}
.shift-left {
    grid-column: 1 / 4;
}
.shift-right {
    grid-column: 14 / 16;
}
.space {
    grid-column: 4 / 12;
}
